<script setup>
// 导入reactive函数
import { reactive } from "vue";
// 导入ref函数
import { ref } from "vue";

//使用reactive函数，必须传入一个【对象类型】的参数,返回一个响应式的对象
const state = reactive({
  name: "张三",
  age: 18,
  gender: "男",
});
const setAgeAdd = () => {
  // reactive函数修改属性，不需要.value
  state.age++;
};
console.log(state);

// 使用ref函数，必须传入一个【任意类型】的参数,返回一个响应式的对象
const count = ref(0);
const setCountAdd = () => {
  //ref函数修改属性，必需要.value
  count.value++;
};
console.log(count);
</script>

<template>
  <div>
    <button @click="setAgeAdd">{{ state.age }}</button>
    <p></p>
    <button @click="setCountAdd">{{ count }}</button>
  </div>
</template>

<style scoped>
</style>
